<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("你好你好")
        reject("错误错误")
      }, 1000)
    }).then((res) => {
      console.log(res + "第一层十行代码");
      res += "111";
      return new Promise((resolve) => {
        resolve(res)
      })
    }).then((res) => {
      console.log(res + "第二层十行代码");
      res += "222"
      return new Promise((resolve) => {
        resolve(res)
      })
    }).then((res) => {
      console.log(res + "第三层十行代码");
    }).catch((err) => {
      console.log(err);
    })

    // 在每次进行下一步操作的时候都要return 一个new Promise很麻烦, 所以ES6提供简写模式
    new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("你好你好")
        reject("错误错误")
      }, 1000)
    }).then((res) => {
      console.log(res + "第一层十行代码");
      res += "111"
      // return Promise.resolve(res) // 简写模式
      // 如果是要进入catch回调的话, 就用 return Promise.reject()
      // return Promise.reject("错误错误")
      // 或者使用 throw "错误信息"
      throw "错误错误"
    }).then((res) => {
      console.log(res + "第二层十行代码");
      res += "222"
      return Promise.resolve(res)
    }).then((res) => {
      console.log(res + "第三层十行代码");
    }).catch((err) => {
      console.log(err);
    })

    // 执行成功后每次都要写Promise.resolve, ES6觉得也很麻烦, 所以还可以更简写
    new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("你好你好")
        reject("错误错误")
      }, 1000)
    }).then((res) => {
      console.log(res + "第一层十行代码");
      res += "111"
      return res // 超级简写模式, 只能在then中使用
    }).then((res) => {
      console.log(res + "第二层十行代码");
      res += "222"
      return res
    }).then((res) => {
      console.log(res + "第三层十行代码");
    }).catch((err) => {
      console.log(err);
    })
  </script>
</body>

</html>